<template>
  <su-fixed bottom placeholder bg="bg-white">
    <view class="ui-tabbar-box">
      <view class="ui-tabbar ss-flex ss-col-center ss-row-between">
	      <!-- #ifdef MP -->
        <button
	        open-type="contact"
          v-if="serviceIcon"
	        :show-message-card="true"
	        :send-message-title="`${userInfo.mark} 商品-${productId}`"
	        :send-message-img="productImg"
	        :send-message-path="`/pages/goods/index?id=${productId}`"
          class="detail-tabbar-item ss-flex ss-flex-col ss-row-center ss-col-center btnStyle"
          @tap="toContact"
        >
	        <!--<button class="btnStyle" ></button>-->
          <image
            class="item-icon"
            :src="sheep.$url.cdn('https://img.js.design/assets/img/65dad77096cc0ee4ba7f01c4.png#af99ff7dc158d396705a1b08d1603fe1')"
            mode="aspectFit"
          ></image>
          <view class="item-title">客服</view>
        </button>
	      <!-- #endif -->
       <!-- <view
          v-if="shareIcon"
          class="detail-tabbar-item ss-flex ss-flex-col ss-row-center ss-col-center"
          @tap="sheep.$router.go(`/pages/goods/comment/backup/add`, { productId: productId })"
        >
          <image
            class="item-icon"
            :src="sheep.$url.cdn('https://img.js.design/assets/img/65dad81c6b615b813541674c.png#ba1cd8b6c60917bd89e6f910b95de3d9')"
            mode="aspectFit"
          ></image>
          <view class="item-title">留言</view>
        </view>-->
        <slot></slot>
	      <!--<view
			      v-if="shareIcon"
			      class="detail-tabbar-item ss-flex ss-flex-col ss-row-center ss-col-center"
			      @tap="openSalePop()"
	      >
		      <image
				      class="item-icon"
				      :src="sheep.$url.cdn('https://marubuy-oss.oss-cn-beijing.aliyuncs.com/2024/11/10e3af3363dd5f4083b74dc50686ef3c31砍价.png')"
				      mode="aspectFit"
		      ></image>
		      <view class="item-title">砍价</view>
	      </view>-->
	      <slot></slot>
      </view>
    </view>

	  <!--砍价弹窗-->
	  <su-popup :show="state.showSale" round="10" @close="onCloseSale()">
		  <view class="ss-modal-box bg-white ss-flex-col">
			  <view v-if="!sheep.$helper.isRealEmpty(state.currentSale.value)" class="text-pre label-text ss-m-b-20">降价留言：{{ state.currentSale.value }}</view>
			  <view v-else class="text-pre label-text ss-m-b-20">请选择降价规格</view>
			  <view class="ss-flex ss-col-center">
				  <!--砍价选择区域-->
				  <scroll-view scroll-y="true" class="modal-content-scroll" @touchmove.stop>
					  <view class="ss-m-b-20" v-for="sale in state.saleOptions" :key="sale.name">
						  <view class="ss-flex ss-col-center ss-flex-wrap">
							  <button
									  class="ss-reset-button spec-btn"
									  :class="[
                  {
                    'spec-btn-select': state.currentSale.name === sale.name,
                  }
                ]"
									  @tap="onSelectSale(sale)"
							  >
								  {{ sale.name }}
							  </button>
						  </view>
					  </view>
				  </scroll-view>
			  </view>
			  <view class="modal-footer border-top">
				  <view class="buy-box ss-flex ss-col-center ss-flex ss-col-center ss-row-center">
					  <button class="ss-reset-button buy-btn ui-Shadow-Main" @tap="onConfirmSale">确认发布砍价留言</button>
				  </view>
			  </view>
		  </view>
	  </su-popup>
  </su-fixed>
</template>

<script setup>
  /**
   *
   * 底部导航
   *
   * @property {String} bg 			 			- 背景颜色Class
   * @property {String} ui 			 			- 自定义样式Class
   * @property {Boolean} noFixed 		 			- 是否定位
   * @property {Boolean} topRadius 		 		- 上圆角
   *
   *
   */

  import { computed, reactive } from 'vue';
  import sheep from '@/sheep';
  import { showShareModal } from '@/sheep/hooks/useModal';

  // 数据
  const state = reactive({
	  showSale: false,
	  saleOptions: [],
	  currentSale: {},
	  form: {
		  status: 1,
		  createBy: sheep.$store('user').userInfo.id,
	  },
  });

  const userInfo = computed(() => sheep.$store('user').userInfo);

  // 接收参数
  const props = defineProps({
    modelValue: {
      type: Object,
      default() {},
    },
    bg: {
      type: String,
      default: 'bg-white',
    },
    bgStyles: {
      type: Object,
      default() {},
    },
    ui: {
      type: String,
      default: '',
    },
	  productId: {
			type: String,
		  default: ''
	  },
	  productImg: {
		  type: String,
		  default: ''
	  },
	  sellerId: {
			type: Number,
		  default: null
	  },

    noFixed: {
      type: Boolean,
      default: false,
    },

	  review: {
			type: Boolean,
		  default: () => true
	  },
    topRadius: {
      type: Number,
      default: 0,
    },
    collectIcon: {
      type: Boolean,
      default: true,
    },
    serviceIcon: {
      type: Boolean,
      default: true,
    },
    shareIcon: {
      type: Boolean,
      default: true,
    },
  });
  const elStyles = computed(() => {
    return {
      'border-top-left-radius': props.topRadius + 'rpx',
      'border-top-right-radius': props.topRadius + 'rpx',
      overflow: 'hidden',
    };
  });

  const tabbarheight = (e) => {
    uni.setStorageSync('tabbar', e);
  };

	async function openSalePop() {
		state.showSale = true;
		// 读取字典数据
		let res = await sheep.$api.order.channelList({ type: 'sale_config' });
		console.log(res, '砍价规格')
		if (res[0]) {
			state.saleOptions = JSON.parse(res[0].dictValue);
			console.log(state.saleOptions, '砍价规格')
		}
	}

	function onCloseSale() {
		state.showSale = false;
	}

	function onConfirmSale() {
		if (sheep.$helper.isRealEmpty(state.currentSale.value)) {
			sheep.$helper.toast('请选择降价规格')
			return
		}
		uni.showModal({
			title: `确认发布【${state.currentSale.name}】砍价留言么？`,
			content: `发布砍价留言后,请您及时关注煤炉,以免错过砍价进展,或专用链接`,
			showCancel: true,
			confirmText: '知道了',
			success: function (res) {
				if (res.confirm) {
					// 调用留言发布接口
					state.form.comments = state.currentSale.value;
					state.form.productId = props.productId;
					sheep.$api.goods.commentAdd(state.form).then(res => {
						sheep.$helper.toast('发布成功, 请您及时关注煤炉,以免错过砍价进展')
						state.showSale = false
					})
				}
			}
		});
	}

	function onSelectSale(sale) {
		state.currentSale = sale
	}

  async function onFavorite() {
    // sheep.$helper.toast('功能暂未开发')
    // const { error } = await sheep.$api.user.favorite.do(props.modelValue.id);
    // if (error === 0) {
    //   if (props.modelValue.favorite) {
    //     props.modelValue.favorite = 0;
    //   } else {
    //     props.modelValue.favorite = 1;
    //   }
    // }
	  sheep.$router.go('/pages/index/seller', { sellerId: props.sellerId })
  }

  function toContact() {
	  // sheep.$router.go('/pages/goods/comment/list', {})
  }

  const onChat = () => {
    sheep.$helper.toast('功能暂未开发')
    // sheep.$router.go('/pages/chat/index', {
    //   id: props.modelValue.id,
    // });
  };
</script>

<style lang="scss" scoped>

// 下单
.buy-box {
	padding: 10rpx 0;
	padding-bottom: 40rpx;

	.add-btn {
		width: 356rpx;
		height: 80rpx;
		border-radius: 40rpx 0 0 40rpx;
		background-color: var(--ui-BG-Main-light);
		color: var(--ui-BG-Main);
	}

	.buy-btn {
		padding-left: 40rpx;
		padding-right: 40rpx;
		margin-bottom: 40rpx;
		height: 80rpx;
		background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
		color: #fff;
	}
	.score-btn {
		width: 100%;
		margin: 0 20rpx;
		height: 80rpx;
		border-radius: 40rpx;
		background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
		color: #fff;
	}
}

.ss-modal-box {
	border-radius: 30rpx 30rpx 0 0;
	max-height: 1000rpx;

	.text-pre {
		padding: 20rpx;
		margin: 30rpx;
		border-radius: 30rpx;
		color: #F39800;
		font-weight: bold;
		border: 2px solid #F39800;
	}

	.modal-header {
		position: relative;

	}
}

.modal-content-scroll {
	padding: 20rpx;
	margin: 30rpx;
	border-radius: 30rpx;
	color: #F39800;
	font-weight: bold;
	border: 2px solid #F39800;
}

.spec-btn {
	height: 60rpx;
	width: 100%;
	padding: 30rpx;
	background: #ffe7e7 !important;
	border-radius: 30rpx;
	color: #434343;
	font-size: 26rpx;
	margin-right: 20rpx;
	margin-bottom: 10rpx;
}

.spec-btn-select {
	background: #F39800 !important;
	border-radius: 30rpx !important;
	color: #ffffff;
}


  .ui-tabbar-box {
    box-shadow: 0px -6px 10px 0px rgba(51, 51, 51, 0.2);
  }
  .ui-tabbar {
    display: flex;
    height: 70px;
    background: #fff;
	  justify-content: flex-start;
	  margin-left: 10rpx;

    .detail-tabbar-item {
      width: 100rpx;

      .item-icon {
        width: 40rpx;
        height: 40rpx;
      }

      .item-title {
        font-size: 20rpx;
        font-weight: 500;
        line-height: 20rpx;
        margin-top: 12rpx;
      }
    }
  }
  .btnStyle{
	  border: none;
	  height: fit-content;
	  font-size: 12px;
	  padding: 0 !important;
	  color: #000000;
	  margin: 0;
	  background-color: transparent;
	  &::after{
		  border:none;
	  }
  }
</style>
